const app = getApp();
import HttpRequst from '../../utils/httpRequst.js'
import API from '../../utils/config.js'
import QRCode from '../../utils/weapp-qrcode.js'
import upng from "../../utils/UPNG.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: "",
    info: "",
    qrCodeTempFilePath: "",
    sreadTempFilePath: "",
    qrRect:"",
    spreadRect:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    this.setData({
      id:options.id

    });
    wx.showLoading();
    HttpRequst(false, API.spreadDetail, 1, app.getUkey(), {
      id: this.data.id
    }, "POST", false, function(res) {
      
      that.setData({
        info: res.data
      });

      that.createQRCodeCanvas();
      setTimeout(function() {
        that.getQRCodeTempFilePath();
      });
    });


    const query = wx.createSelectorQuery()
    query.select('#J_qrcode-box').boundingClientRect();
    query.select('#J_jjd-entry').boundingClientRect();
    query.exec(function (res) {
     
      that.setData({
        qrRect:res[0],
        spreadRect:res[1]
      })
     
    })




  },
  
  createQRCodeCanvas: function() {
    //生成链接二维码canvas
  
    var qrcode = new QRCode('qrcode-canvas', {
      // usingIn: this,
      text: this.data.info.ad_link,
      width: this.data.qrRect.width,
      height:this.data.qrRect.height,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },
  getQRCodeTempFilePath: function() {
    var that = this;
    //二维码canvas转化成 tempFilePath
    wx.canvasToTempFilePath({
      width: this.data.qrRect.width,
      height: this.data.qrRect.height,
      destWidth: this.data.qrRect.width,
      destHeight: this.data.qrRect.height,
      canvasId: 'qrcode-canvas',
      success(res) {
        //转化成功后
       
        that.setData({
          qrCodeTempFilePath: res.tempFilePath
        });
        
        //进行传播canvas 画图
        that._drawSpreadCanvas();
        wx.hideLoading();

      }
    })
  },
  copyText: function(e) {
    
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function(res) {
        wx.getClipboardData({
          success: function(res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },
  saveImg: function() {
    var that = this;
    wx.saveImageToPhotosAlbum({
      filePath: this.data.sreadTempFilePath,
      success: function (dres) {
        wx.showToast({
          title: '保存成功'
        })
      }
    })
  },

  _drawSpreadCanvas: function() {
    var that = this;
    wx.downloadFile({
      url: that.data.info.ad_cover,
      success: function(res) {
        const ctx = wx.createCanvasContext('spread-canvas');
        ctx.drawImage(res.tempFilePath, 0, 0, that.data.spreadRect.width, that.data.spreadRect.height);
        ctx.drawImage(that.data.qrCodeTempFilePath, 5, that.data.spreadRect.height - that.data.qrRect.height-10, that.data.qrRect.width+5);
        ctx.draw()
        wx.canvasToTempFilePath({
          width: 250,
          height: 250,
          destWidth: 800,
          destHeight: 800,
          canvasId: 'spread-canvas',
          success: function(res) {
            that.setData({
              sreadTempFilePath: res.tempFilePath
            })
          },
        })
      }
    })
  }


})